<template>
    <view class="page" :class="{ 'dark-mode': isDarkMode }">
        <!-- 用户信息区域 -->
        <view class="user-info">
            <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
            <view class="user-detail">
                <view class="nickname-wrapper">
                    <text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
                    <text class="bigfont big-shezhi" @click="handleMenuClick('settings')">&#xe78e;</text>
                </view>
            </view>
        </view>

        <!-- 功能列表 -->
        <view class="menu-grid">
            <view class="menu-item" @click="handleMenuClick('myShare')">
                <text class="bigfont big-fenxiang1"></text>
                <text class="menu-text">我分享的</text>
                <view class="vertical-divider"></view>
            </view>
            <view class="menu-item" @click="handleMenuClick('sharedToMe')">
                <text class="bigfont big-fenxianggeiwode"></text>
                <text class="menu-text">分享给我的</text>
                <view class="vertical-divider"></view>
            </view>
            <view class="menu-item" @click="handleMenuClick('giftStatistics')">
                <text class="bigfont big-liwu"></text>
                <text class="menu-text">我送的礼</text>
            </view>
        </view>

        <!-- 其他菜单 -->
        <view class="menu-list">
            <view class="menu-cell" @click="handleMenuClick('about')">
                <text class="menu-title">关于我们</text>
                <text class="bigfont big-youjiantoucu"></text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { isDarkMode } from '@/store/theme';
import { userInfo } from '@/store/user';


// 菜单点击处理
const handleMenuClick = (type: string) => {
    switch (type) {
        case 'myShare':
            uni.navigateTo({ url: '/pages/share/my-share' });
            break;
        case 'sharedToMe':
            uni.navigateTo({ url: '/pages/share/shared-to-me' });
            break;
        case 'settings':
            uni.navigateTo({ url: '/pages/settings/index' });
            break;
        case 'giftStatistics':
            uni.navigateTo({ url: '/pages/gift/statistics' });
            break;
        case 'about':
            uni.showToast({ title: '功能开发中', icon: 'none' });
            break;
    }
};

</script>

<style scoped>
.page {
    min-height: 100vh;
    height: 100vh;
    background-color: var(--theme-background);
    padding: 32rpx;
    padding-top: 90px;
    transition: all 0.3s;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
}

.user-info {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    padding-right: 0px;
    display: flex;
    align-items: center;
    gap: 24rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
}

.user-detail {
    flex: 1;
}

.nickname-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nickname {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    transition: color 0.3s;
}

.nickname-wrapper .bigfont {
    font-size: 44rpx;
    color: #666;
    transition: color 0.3s;
}

.setting-icon {
    font-size: 40rpx;
    color: #666;
    padding: 16rpx;
    transition: color 0.3s;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    padding: 32rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rpx;
    padding: 16rpx;
    position: relative;
}

.menu-item .bigfont {
    font-size: 44rpx;
    color: #333;
    transition: color 0.3s;
}

.menu-text {
    font-size: 26rpx;
    color: #666;
    transition: color 0.3s;
}

.menu-list {
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.menu-cell {
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-title {
    font-size: 26rpx;
    color: #333;
    transition: color 0.3s;
}

.menu-cell .bigfont {
    font-size: 32rpx;
    color: #999;
    transition: color 0.3s;
}

/* 暗黑模式样式 */
.dark-mode {
    background-color: #121212;
}

.dark-mode .user-info,
.dark-mode .menu-grid,
.dark-mode .menu-list {
    background: #1e1e1e;
    border: 2rpx solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
}

.dark-mode .nickname {
    color: rgba(255, 255, 255, 0.9);
}

.dark-mode .nickname-wrapper .bigfont {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .menu-item .bigfont {
    color: rgba(255, 255, 255, 0.9);
}

.dark-mode .menu-text {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .menu-title {
    color: rgba(255, 255, 255, 0.9);
}

.dark-mode .menu-cell .bigfont {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .menu-cell {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .vertical-divider {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 添加卡片的过渡效果 */
.user-info,
.menu-grid,
.menu-list {
    transition: all 0.3s ease;
}

/* 添加统一的卡片样式 */
.user-info,
.menu-grid,
.menu-list {
    border: 2rpx solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.divider {
    height: 2rpx;
    background-color: #f0f0f0;
    margin: 0 32rpx 32rpx;
}

.dark-mode .divider {
    background-color: #2c2c2c;
}

.vertical-divider {
    width: 2rpx;
    height: 60rpx;
    background-color: #f0f0f0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.menu-item:not(:nth-child(3n)) .vertical-divider {
    display: block;
}
</style>